<template>
  <div class="user_list-page flexC">
    <div class="user_list-page flexC" style="margin-bottom: 20px;">
      <div class="pageHead flexC">
        <p>扩展方法查询</p>
      </div>
      <div class="pageHead flexC">
<!--        查询-->
        <Form ref="searchForm" :model="searchForm" inline :label-width="80">
          <FormItem label="名称" prop="name">
            <Input
                type="text"
                v-model="searchForm.name"
                placeholder="请输入方法名称"
                clearable
                style="width: 200px"
            />
          </FormItem>

          <FormItem label="扩展方法" prop="ext_method">
            <Input
                type="text"
                v-model="searchForm.ext_method"
                placeholder="请输入扩展方法"
                clearable
                style="width: 200px"
            />
          </FormItem>

          <FormItem label="方法类型" prop="ext_method_type">
            <Select
                v-model="searchForm.ext_method_type"
                placeholder="请选择"
                clearable
                style="width: 200px"
            >
              <Option :value= 1>内置</Option>
              <Option :value= 0>自定义</Option>
            </Select>
          </FormItem>

          <FormItem style="margin-left: -35px" class="br">
            <Button @click="handleSearch" type="primary" icon="ios-search" style="
             margin-right: 10px;"
            >搜索
            </Button>
            <Button @click="handleReset('searchForm')">重置</Button>
          </FormItem>
        </Form>
      </div>
    </div>


    <div class="pageHead flexC" style="padding-left: 0px;">
      <div class="pageHead flexC">
<!--        创建方法境-->
        <div style="display: flex;justify-content: space-between">
          <p>扩展方法列表</p>
          <Button type="primary" size="small" @click="crmethod = true">创建方法</Button>
        </div>

      <!--        创建方法modal---------------------------------------------------------->
        <div style="display: flex;justify-content: space-between">
          <Modal
                v-model="crmethod"
                title="创建扩展方法"
                width="950"
          >
              <Form ref="methodForm" :model="methodForm" inline :label-width="100" :rules="ruleValidate">
                  <div>
                    <FormItem label="名称" prop="name">
                      <Input
                          type="text"
                          v-model="methodForm.name"
                          placeholder="请输入名称"
                          clearable
                          style="width: 800px"
                      />
                    </FormItem>
                  </div>

                  <div>
                    <FormItem label="扩展方法" prop="ext_method">
                      <Input
                          type="text"
                          v-model="methodForm.ext_method"
                          placeholder="请输入扩展方法"
                          clearable
                          style="width: 800px"
                      />
                    </FormItem>
                  </div>

                  <div>
                    <FormItem label="方法类型" prop="ext_method_type">
                        <Select
                              v-model="methodForm.ext_method_type"
                              placeholder="请选择"
                              clearable
                              style="width: 800px"
                          >
                            <Option :value= 1>内置</Option>
                            <Option :value= 0>自定义</Option>
                          </Select>
                      </FormItem>
                  </div>

                  <div>
                    <FormItem label="扩展方法说明" prop="ext_method_desc">
                      <Input
                          type="textarea"
                          :rows = "5"
                          v-model="methodForm.ext_method_desc"
                          placeholder="请输入扩展方法"
                          clearable
                          style="width: 800px"
                      />
                    </FormItem>
                  </div>

                  <div>
                    <FormItem label="参数说明" prop="args_desc">
                      <Input
                          type="textarea"
                          :rows = "5"
                          v-model="methodForm.args_desc"
                          placeholder="请输入参数说明"
                          clearable
                          style="width: 800px"
                      />
                    </FormItem>
                  </div>

                  <div>
                      <FormItem label="返回值说明" prop="res_value_desc">
                        <Input
                            type="textarea"
                            :rows = "5"
                            v-model="methodForm.res_value_desc"
                            placeholder="请输入返回值说明"
                            clearable
                            style="width: 800px"
                        />
                      </FormItem>
                    </div>
              </Form>

              <div slot="footer">
                <Button @click="methodoff('methodForm')">取消</Button>
                <Button @click="confirmme('methodForm')" type="primary">确定</Button>
              </div>
            </Modal>
        </div>
      <!-- ---------------------------------------------------------------------------->

      <!--        编辑方法modal---------------------------------------------------------->
      <div style="display: flex;justify-content: space-between">
        <Modal
              v-model="upmethod"
              title="创建扩展方法"
              width="950"
        >
            <Form ref="upmethodForm" :model="upmethodForm" inline :label-width="100" :rules="upruleValidate">
                <div>
                  <FormItem label="名称" prop="name">
                    <Input
                        type="text"
                        v-model="upmethodForm.name"
                        placeholder="请输入名称"
                        clearable
                        style="width: 800px"
                    />
                  </FormItem>
                </div>

                <div>
                  <FormItem label="扩展方法" prop="ext_method">
                    <Input
                        type="text"
                        v-model="upmethodForm.ext_method"
                        placeholder="请输入扩展方法"
                        clearable
                        style="width: 800px"
                    />
                  </FormItem>
                </div>

                <div>
                  <FormItem label="方法类型" prop="ext_method_type">
                      <Select
                            v-model="upmethodForm.ext_method_type"
                            placeholder="请选择"
                            clearable
                            style="width: 800px"
                        >
                          <Option :value= 1>内置</Option>
                          <Option :value= 0>自定义</Option>
                        </Select>
                    </FormItem>
                </div>

                <div>
                  <FormItem label="扩展方法说明" prop="ext_method_desc">
                    <Input
                        type="textarea"
                        :rows = "5"
                        v-model="upmethodForm.ext_method_desc"
                        placeholder="请输入扩展方法"
                        clearable
                        style="width: 800px"
                    />
                  </FormItem>
                </div>

                <div>
                  <FormItem label="参数说明" prop="args_desc">
                    <Input
                        type="textarea"
                        :rows = "5"
                        v-model="upmethodForm.args_desc"
                        placeholder="请输入参数说明"
                        clearable
                        style="width: 800px"
                    />
                  </FormItem>
                </div>

                <div>
                    <FormItem label="返回值说明" prop="res_value_desc">
                      <Input
                          type="textarea"
                          :rows = "5"
                          v-model="upmethodForm.res_value_desc"
                          placeholder="请输入返回值说明"
                          clearable
                          style="width: 800px"
                      />
                    </FormItem>
                  </div>
            </Form>

            <div slot="footer">
              <Button @click="upmethod=false">取消</Button>
              <Button @click="upconfirmme('upmethodForm')" type="primary">确定</Button>
            </div>
          </Modal>
      </div>
      <!-- ---------------------------------------------------------------------------->

      </div>

      <div class="pageContent flexC">
        <Table
            border
            :columns="columns"
            :data="data"
            sortable="custom"
            ref="table"
            size="small"
        >

          <template slot-scope="{ row,index }" slot="ext_method">
            <samp>
              <Tag color="cyan">{{ row.ext_method }}</Tag>
            </samp>
          </template>
        </Table>
      <div>
      </div>
      </div>
    </div>
  </div>
</template>

<script>

import {methodList, methodcr, methodup, methodde} from '../../api/api'
export default {
  name: "method",
  created() {
    this.getlist()
  },

  methods: {
    methodoff(name) {
      this.crmethod = false
      this.$refs[name].resetFields();
    },

    handleSearch() {
      let data = {
        name: this.searchForm.name,
        ext_method: this.searchForm.ext_method,
        ext_method_type: this.searchForm.ext_method_type === 1 ? true : false,
      }
      methodList(data).then(res => {
        this.data = res.data.data
        this.$Message.success('搜索成功')
      })
    },

    handleReset(name) {
      this.getlist()
      this.$refs[name].resetFields();
    },

    edit(name,v) {
      this.upmethod=true
      this.method_id = v.id
      this.upmethodForm.name = v.name
      this.upmethodForm.ext_method = v.ext_method
      this.upmethodForm.ext_method_desc = v.ext_method_desc
      this.upmethodForm.ext_method_type = v.ext_method_type === false ? 1 : 0
      this.upmethodForm.args_desc = v.args_desc
      this.upmethodForm.res_value_desc = v.res_value_desc
      },

    getlist() {
      methodList().then(res => {
        this.data = res.data.data
      })
    },

    confirmme(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          let data = {
        name: this.methodForm.name,
        ext_method: this.methodForm.ext_method,
        ext_method_desc: this.methodForm.ext_method_desc,
        ext_method_type: this.methodForm.ext_method_type === 1 ? true: false,
        args_desc: this.methodForm.args_desc,
        res_value_desc: this.methodForm.res_value_desc,
      }
          methodcr(data).then(res => {
            this.crmethod = false
            this.getlist()
            this.$Message.success(res.msg)
          })
        }
      })

    },

    upconfirmme(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          let data = {
        name: this.upmethodForm.name,
        ext_method: this.upmethodForm.ext_method,
        ext_method_desc: this.upmethodForm.ext_method_desc,
        ext_method_type: this.upmethodForm.ext_method_type === 1 ? true: false,
        args_desc: this.upmethodForm.args_desc,
        res_value_desc: this.upmethodForm.res_value_desc,
      }
          methodup(this.method_id, data).then(res => {
            this.upmethod = false
            this.getlist()
            this.$Message.success(res.msg)
          })
        }
      })

    },

    demethod(row) {
      methodde(row.id).then(res =>{
        this.$Message.success(res.msg)
        this.getlist()
      })
    }
  },

  data() {
    return {
      method_id:"",
      methodForm: {
        name:"",
        ext_method: "",
        ext_method_desc: "",
        ext_method_type: null,
        args_desc: "",
        res_value_desc: ""
      },
      upmethodForm: {
        name:"",
        ext_method: "",
        ext_method_desc: "",
        ext_method_type: null,
        args_desc: "",
        res_value_desc: ""
      },
      crmethod:false,
      upmethod:false,
      data:[],
      searchForm: {
        name: "",
        ext_method:"",
        ext_method_type:null
      },
      ruleValidate: {
        name: [
          {required: true, message: '请输入方法名称', trigger: 'blur,change'}
        ],
        ext_method: [
          {required: true, message: '请输入扩展方法', trigger: 'blur,change'},
        ],
        ext_method_type: [
          {required: true, message: '请选择方法类型', trigger: 'blur', type: 'number'},
        ],
      },

      upruleValidate: {
        name: [
          {required: true, message: '请输入方法名称', trigger: 'blur,change'}
        ],
        ext_method: [
          {required: true, message: '请输入扩展方法', trigger: 'blur,change'},
        ],
        ext_method_type: [
          {required: true, message: '请选择方法类型', trigger: 'blur', type: 'number'},
        ],
      },
      columns: [
        {
          type: "index",
          width: 60,
          align: "center",
        },
        {
          title: "名称",
          key: "name",
          align: "center",
          width: 350,
        },
        {
          title: "扩展方法",
          align: "center",
          slot: "ext_method",
          width: 350,
        },
        {
          title: "扩展方法说明",
          key: "ext_method_desc",
          align: "center",
          width: 350,
          minWidth: 120,
          render :(h,params) => {
            return h('div' , params.row.ext_method_desc || '-')
              }

        },
        {
        title: "参数说明",
        key: "args_desc",
        align: "center",
        width: 350,
        minWidth: 120,
        render :(h,params) => {
          return h('div' , params.row.args_desc || '-')
            }

      },
        {
      title: "返回值说明",
      key: "res_value_desc",
      align: "center",
      width: 350,
      minWidth: 120,
      render :(h,params) => {
        return h('div' , params.row.res_value_desc || '-')
          }

    },
        {
          title: "操作",
          key: "action",
          width: 170,
          align: "center",
          fixed: "right",
          render: (h, params) => {
            let enableOrDisable = "";
            return h("div", [
              h(
                  "a",
                  {

                    on: {
                      click: () => {
                        this.edit('upmethodForm', params.row);
                      },
                    },
                  },
                  "编辑"
              ),
              enableOrDisable,
              h("Divider", {
                props: {
                  type: "vertical",
                },
              }),
              h('Poptip', {
                style: {
                  color: '#ED4014'
                },
                props: {
                  confirm: true,
                  transfer: true,
                  placement: 'left-end',
                  title: '确定要删除吗！',
                  type: 'error',
                  size: 'small',
                },
                on: {
                  'on-ok': () => {
                    this.demethod(params.row);
                  }
                }
              }, '删除')
            ]);

          },
        },
      ],
    }
  }
}
</script>

<style scoped>

</style>
